<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.setState</title>
    <!--1、引入react核心文件-->
    <script src="./js/react.development.js"></script>
    <!--2、引入react-dom核心文件-->
    <script src="./js/react-dom.development.js"></script>
    <!--3、引入babel转换文件-->
    <script src="./js/babel.min.js"></script>
</head>

<body>
    <!--4、创建容器-->
    <div id="root"></div>
    <!--5、设置脚本类型,相当于里面所有代码都默认处在严格模式下，而严格模式下的函数的this为undefined-->
    <script type="text/babel">
        //6、创建容器对象
        let root = ReactDOM.createRoot(document.querySelector('#root'));
        //7、创建类组件
        let { Component } = React;
        //案例：今天的心情好不好
        class App extends Component {
            //每一个类组件必须要有render方法，目的是为了渲染DOM结构
            //初始化状态数据
            state = {
                isGood: true
            }

            //render的执行次数为1(初始化的时候)+n(当每一次state的值发生改变的时候)次
            render() {
                //this指向组件实例化对象
                //读取state状态数据
                let { isGood } = this.state;
                return <div>
                    <p>今天的心情:{isGood ? '好' : "不好"}</p>
                    <button onClick={() => {
                        /* this.setState({
                            isGood: !isGood
                        }) */
                        //测试
                        //setState修改状态是异步的
                        // console.log(isGood)

                        //如果想要得到实时的最新的状态结果值，则setState方法需要传入一个函数,参数的含义表示状态数据
                        this.setState(state => {
                            // console.log(state);
                            //解构
                            let { isGood } = state;
                            // console.log(state);
                            // console.log(isGood);
                            isGood = !isGood
                            console.log(isGood)
                            //函数执行完毕一定要有返回值，且要求返回是一个对象
                            //ES6如果对象的属性名和属性值变量同名，可以简写成一个
                            return { isGood }
                        })
                    }}>修改心情</button>
                </div >
            }
        }
        //8、渲染
        root.render(<App />); // let s1 = new App()
    </script>
</body>

</html>